<template>
	<base-popup
		:modelValue="modelValue"
		@goBack="onClose"
		:title="$t('usdtAddressAdd.title')"
		is-go-back
		:closable="false"
		titleClass="pb-4 pt-6"
		class="h-[800px]">
		<template #title>
			<div class="relative">
				{{ title }}
				<base-icon
					name="order"
					size="20"
					class="absolute right-5 bottom-0 top-0 my-auto self-center"
					@click="walletStore.setPaymentHistoryShow(true)" />
			</div>
		</template>

		<component :is="component"></component>
	</base-popup>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { t } from '@/utils'
import { bankType, WalletType } from '@/enums'
import { BaseIcon, BasePopup } from '@/components/base'
import WithdrawUsdt from './withdraw-usdt.vue'
import WithdrawBank from './withdraw-bank.vue'
import { useWalletStore } from '@/store'

const walletStore = useWalletStore()

const modelValue = computed(() => walletStore.showWithdrawPopup)

const component = computed(() => {
	const type = walletStore.withdrawData.type
	if (bankType.includes(type)) {
		return WithdrawBank
	} else {
		return WithdrawUsdt
	}
})

const title = computed(() => {
	const prefix = t('withdraw.title') + ' - '
	let title
	const type = walletStore.withdrawData.type
	if (bankType.includes(type)) {
		title = t(WalletType.bank.name)
	} else {
		title = t(WalletType.usdt.name)
	}

	return prefix + t(title)
})

const onClose = () => {
	walletStore.setWithdrawPopupShow(false)
}
</script>
